<template>
  <div id="fullscreen" class="_layout_main_" style="display:flex;flex-flow: row wrap;">
    <div class="_left_">
      <div style="background: #FFFFFF;padding: 24px">

        <!--头像-->
        <div class="_left_img_">
          <a-avatar :size="120" :src="$store.state.userInfo.img" style="margin-bottom: 16px"/>
          <div class="_left_name_">{{ $store.state.userInfo.name.substring(0, 10) }}</div>
        </div>
        <p>角色</p>
        <p>部门</p>
        <p>地址</p>
        <a-divider/>
        其他信息

      </div>
    </div>

    <div class="_right_">
      <div style="background: #FFFFFF">
        <a-tabs size="large">

          <a-tab-pane key="1" tab="登录历史">
            <div style="padding: 24px">
              <p style="color: #00000073">本页面展示当前帐号最近登录的50条历史记录，一个自然日内相同IP视为一条记录</p>
              <a-timeline>
                <a-timeline-item>now date</a-timeline-item>
                <a-timeline-item v-for=" e in loginMsg" color="gray">{{ e }}</a-timeline-item>
              </a-timeline>

            </div>
          </a-tab-pane>

          <a-tab-pane key="2" tab="消息通知" force-render>
            <div style="padding: 24px">
              <p style="color: #00000073">本页面展示当前帐号最10条历史记录</p>
              <a-timeline>
                <a-timeline-item>now date</a-timeline-item>
                <a-timeline-item v-for=" e in loginMsg" color="gray">{{ e }}</a-timeline-item>
              </a-timeline>

            </div>
          </a-tab-pane>

        </a-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import {createVNode, defineComponent} from 'vue';
import {Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import screenfull from "screenfull";
import Breadcrumb from "@/common/layout/Breadcrumb.vue";

export default defineComponent({
  components: {Breadcrumb},

  async mounted() {
    await this.queryRole_()

    this.queryPage_()

    //全局监听-刷新
    this.$event.$on('refresh', (data) => {
      if ('/system/user' == data['path']) {
      }
    })

  },

  data() {
    return {
      loginMsg: [
        "Solve initial network problems 2022-06-13",
        "Solve initial network problems 2022-06-12",
        "Solve initial network problems 2022-06-11",
        "Solve initial network problems 2022-06-10",
        "Solve initial network problems 2022-06-09",
        "Solve initial network problems 2022-06-08",
        "Solve initial network problems 2022-06-07",
        "Solve initial network problems 2022-06-06",
        "Solve initial network problems 2022-06-05",
        "Solve initial network problems 2022-06-04",
        "Solve initial network problems 2022-06-03",
        "Solve initial network problems 2022-06-02",
        "Solve initial network problems 2022-06-01",
      ],
      //开关
      show: {
      },

      //搜索
      search: {

        //默认搜索
        def: {
          name: "",
          account: "",
          role: [],
        },

        //默认搜索规则
        defRules: {},

      },

      //分页
      page: {

        //默认分页
        def: {
          current: 1,
          size: 10,
          total: 10,
          options: ['10', '30', '50', '100', '200', '500'],
          type: 'small',
          sizeChange: (current, pageSize) => {
            this.page.current = current;
            this.page.size = pageSize;
            this.queryPage_()
          },
          currentChange: (current) => {
            this.page.current = current
            this.queryPage_()
          }
        }

      },

      //表单
      form: {

        //默认表单
        def: {
          data: {},
          rules: {
            role: [
              {
                required: true,
                message: '必选项',
                trigger: 'blur',
              },
            ],
            account: [
              {
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
              {
                min: 5,
                message: '长度至少5位字符',
                trigger: 'blur',
              },
              {
                max: 20,
                message: '长度最多20位字符',
                trigger: 'blur',
              },
            ],
            password: [
              {
                required: true,
                max: 20,
                message: '长度最多20位字符（可以为空）',
                trigger: 'blur',
              },
              {
                validator: (_rule, value) => {
                  if (!value || value.length == 0) {
                    return Promise.resolve();
                  }
                  if (value.length < 5) {
                    return Promise.reject('长度至少5位字符（可以为空）');
                  }
                  return Promise.resolve();
                }, trigger: 'blur'
              }
            ],
          },
          lc: {span: 3},
          wc: {span: 19},
          searchRules: {},
          //(初始化/重置)Data
          resetData: {
            role: ['10'],
            account: null,
            password: null,
            email: null,
            phone: null,
          },
        },

        //功能表单
        api: {
          data: {},
          rules: {
            sort: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            name: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            path: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            type: [
              {
                type: 'any',
                required: true,
                message: '必填项',
                trigger: 'blur',
              },
            ],
            api_info: [],
          },
          lc: {span: 4},
          wc: {span: 16},
          searchRules: {},
          //(初始化/重置)Data
          resetData: {
            name: null,
            type: "1",
            des: null,
            sort: 100,
            api_info: [],
          },
        },

      },

      //表格
      table: {

        //默认表格
        def: {
          size: 'middle',
          data: [],
          column: [
            {title: 'ID', dataIndex: 'id', resizable: true, width: 220},
            {title: '账号', dataIndex: 'account', resizable: true, width: 220},
            // {title: '昵称', dataIndex: 'name', resizable: true, width: 220},
            {title: '角色', dataIndex: 'role', resizable: true, width: 200},
            {title: '排序', dataIndex: 'sort', resizable: true, align: 'center', width: 100},
            {title: '操作', dataIndex: 'action', align: 'center', width: 300},
          ],
          selectKey: [],
          selectRow: [],
        },

      },

      //自动完成
      auto: {
        name: [],
      },

      //option选项
      option: {
        role: [],
        menuRes: [
          {key: '0', text: '按钮'},
          {key: '1', text: '非按钮'},
        ],
        tableSize: [
          {key: 'default', text: '大号'},
          {key: 'middle', text: '中号'},
          {key: 'small', text: '小号'},
        ],
        menuIsSHow: [
          {key: '0', text: '展示',},
          {key: '1', text: '隐藏'},
        ],
      },
    };
  },

  methods: {

    //分页查询
    queryPage_() {
      let param = {
        ...this.search.def
      }
      this.$http.post('/system/user/page', param).then((res) => {
        if (res.status) {
          this.table.def.data = this.$kit.getTree(res.data)
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    //查询角色
    queryRole_() {
      this.$http.post('/system/user/roleList', {}).then((res) => {
        if (res.status) {
          this.option.role = res.data
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //解析角色名
    getRoleName_(id) {
      let name = '';
      this.option.role.filter(e => {
        if (e.id == id) {
          name = e.name
        }
      })
      return name;
    },

    //初始化表单
    resetDef_() {
      this.form.def.data = JSON.parse(JSON.stringify(this.form.def.resetData))
    },

    //重置表单
    resetForm_(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields()
      }
    },

    //打开新增
    openDefAdd_() {
      this.resetDef_()
      this.show.defAdd = true
    },

    //打开编辑
    openDefEdit_(obj) {
      let row = JSON.parse(JSON.stringify(obj))
      this.show.defEdit = true
      this.form.def.data = row;
    },

    //打开编辑
    openDefInfo_(obj) {
      let row = JSON.parse(JSON.stringify(obj))
      this.show.defInfo = true
      this.form.def.data = row;
    },

    //执行新增
    addDef_() {
      this.$refs.defForm
          .validate()
          .then(() => {
            this.$http.post("/system/user/add", this.form.def.data).then((res) => {
              if (res.status) {
                this.$message.success(res.message)
                this.queryPage_()
                this.show.defAdd = false
              } else {
                this.$message.warning(res.message)
              }
            })
          })
          .catch(error => {
            this.$message.warning("存在错误，请检查表单填写情况。", 2)
          });
    },
    //重置密码
    resetPassword_(obj) {
      let row = JSON.parse(JSON.stringify(obj))
      this.$http.post("/system/user/resetPassword", {ids: [row.id]}).then((res) => {
        if (res.status) {
          this.$message.success(res.message)
          this.queryPage_()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    //执行删除
    delDef_(obj) {
      let row = JSON.parse(JSON.stringify(obj))
      this.$http.post("/system/user/del", {ids: [row.id]}).then((res) => {
        if (res.status) {
          this.$message.success(res.message)
          this.queryPage_()
        } else {
          this.$message.warning(res.message)
        }
      })
    },

    //批量删除
    delDefs_() {
      let keys = this.table.def.selectKey;
      if (keys.length === 0) {
        this.$message.warn("请至少勾选一项", 1)
        return
      }

      Modal.confirm({
        title: '是否确定删除?',
        icon: createVNode(ExclamationCircleOutlined),
        content: `已勾选${keys.length}条数据`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        onOk: () => {
          this.$http.post("/system/user/del", {ids: keys}).then((res) => {
            if (res.status) {
              this.$message.success(res.message)
              this.queryPage_()
            } else {
              this.$message.warning(res.message)
            }
          })
        },
        onCancel: () => {
          this.$message.warning("操作已取消", 1)
        },
      });

    },

    //全屏
    fullScreen() {
      let element = document.getElementById("fullscreen")
      if (screenfull.isEnabled) {
        screenfull.request(element)
      }
      screenfull.toggle()
    },

    //表格多选
    defRowSelection_() {
      return {
        type: "checkbox",
        checkStrictly: false,
        preserveSelectedRowKeys: false,//翻页后保留选中状态
        selectedRowKeys: this.table.def.selectKey,
        onChange: (selectedRowKeys, selectedRows) => {
          ////console.log("onChange")
          this.table.def.selectKey = selectedRowKeys
          this.table.def.selectRow = selectedRows
        },
        onSelect: (record, selected, selectedRows) => {
          ////console.log("onSelect")
        },
        onSelectAll: (selected, selectedRows, changeRows) => {
          ////console.log("onSelectAll")
        },
      }
    },
  }

});

</script>

<style scoped lang="less">

&:deep(.ant-tabs-nav) {
  padding: 0 24px;
}

._left_img_ {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  align-items: center;
  max-width: 448px;
  padding: 20px;
}

._left_name_ {
  margin-bottom: 4px;
  color: rgba(0, 0, 0, .85);
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
}


._left_ {
  display: block;
  flex: 0 0 29.167%;
  max-width: 29.167%;
  padding-left: 12px;
  padding-right: 12px;
  margin: 0;
  color: rgba(0, 0, 0, .85);
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5715;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  border-radius: 2px;
}

._right_ {
  display: block;
  padding-left: 12px;
  padding-right: 12px;
  flex: 0 0 70.833%;
  max-width: 70.833%;
}
</style>
